refactor(component): Citrine chart palette + opinionated ECharts defaults by alfredo1996 · Pull Request #1015 · alfredo1996/neoboard

alfredo1996 · 2026-06-11T00:25:19Z

What

Closes #821 and #822 — completes the v1.1.0-alpha milestone (with #1014).

Citrine palette (#821)

10-color categorical default anchored on the brand citrine amber as color 1. Not hand-waved colorblind-safe: the palette was optimized programmatically (greedy search maximizing min pairwise deltaE under Viénot protanopia/deuteranopia/tritanopia simulation) and dominates Deep Ocean on every CVD axis — first-5 worst case deltaE 28–32 vs Deep Ocean's 8–11; all-10 16–18 vs 4–6. A permanent contract test (citrine-cvd-safety.test.ts) locks those thresholds for both light and dark variants. Saved dashboards referencing deep-ocean alias to citrine; DEEP_OCEAN_* exports remain as deprecated aliases for external plugins.

Opinionated chart defaults (#822)

Compact axis numbers (45.2K/1.2M), quiet grid, bars without floating labels + subtle top radius, fine smooth lines with gentle area fill (1.5px, round caps — all opt-outable), pie slice gaps, and tooltips styled from the Graphite & Citrine tokens instead of the ECharts white box. Theme-level where possible, prop defaults where themes can't reach (line chart).

Screenshots

screenshots/v1.1-redesign/ — compare before-03-charts-light.png (default blue bars, raw 1,000,000 axis, floating values) with after-03-charts-light.png (citrine bars, 1M/800K axis, rounded tops) and the dark pair.

Verification

New contract tests: CVD safety (16 assertions), theme defaults (formatter, bar/line/pie/tooltip), palette rename + alias
component 1383 ✓ · app 2897 ✓ · lint 0 errors ✓ · build ✓
Full local Playwright run: the one genuine finding (design-system.spec asserting Deep Ocean values) is fixed in this PR — that spec passes 14/14; remaining residuals are the documented machine-contention clusters (each passing in targeted re-runs, final confirmation run in flight)
CI's 5-shard suite on fresh runners is the authoritative E2E gate for merge

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

New Features
- Introduced the new Citrine color palette as the default for charts, designed with colorblind accessibility in mind
- Line charts now render with smooth curves and filled areas by default
Style
- Reduced default line width for a more refined chart appearance
- Enhanced chart theme styling and axis label formatting

…ults (#821 #822) The Citrine 10-color categorical palette replaces Deep Ocean as the default, anchored on the brand amber (38 95% 55%) as color 1. The palette was optimized programmatically: minimum pairwise deltaE under protanopia/deuteranopia/tritanopia simulation dominates Deep Ocean on every axis (first-5 worst case 28-32 vs 8-11; all-10 16-18 vs 4-6), locked in by a permanent CVD-safety contract test. Saved dashboards using 'deep-ocean' alias to citrine transparently. ECharts themes gain deliberate out-of-the-box styling (#822): - compact axis numbers (8K / 45.2K / 1.2M) via formatAxisCompact - bars: no floating value labels, 3px top radius - lines: 1.5px stroke, round caps, smooth + subtle gradient/low-alpha area fill by default (all opt-outable props) - pies: hairline slice gaps - tooltips: popover-token styling (graphite bg, token border, 8px radius, --shadow-lg) instead of the ECharts white box - axis/legend/grid colors re-derived from the Graphite & Citrine tokens design-system.spec updated to the Citrine contract (was asserting Deep Ocean hue 217 as chart-1). DEEP_OCEAN_* array names stay as deprecated aliases for external plugin compat. Before/after chart screenshots (light+dark) in screenshots/v1.1-redesign/. Closes #821 Closes #822 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

coderabbitai · 2026-06-11T00:25:35Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 9c0d41a0-82da-4397-b45d-9a38cd836698

📥 Commits

Reviewing files that changed from the base of the PR and between 96729ec and a0a9015.

⛔ Files ignored due to path filters (2)

screenshots/v1.1-redesign/after-03-charts-light.png is excluded by !**/*.png
screenshots/v1.1-redesign/after-04-charts-dark.png is excluded by !**/*.png

📒 Files selected for processing (14)

app/e2e/design-system.spec.ts
component/design-tokens.css
component/src/charts/__tests__/base-chart.test.tsx
component/src/charts/__tests__/citrine-cvd-safety.test.ts
component/src/charts/__tests__/line-chart.test.tsx
component/src/charts/__tests__/palettes.test.ts
component/src/charts/__tests__/theme-defaults.test.ts
component/src/charts/__tests__/theme.test.ts
component/src/charts/base-chart.tsx
component/src/charts/index.ts
component/src/charts/line-chart.tsx
component/src/charts/palettes.ts
component/src/charts/theme.ts
component/src/components/composed/__tests__/chart-options-schema.test.ts

Walkthrough

This PR replaces the default "Deep Ocean" chart palette with a new "Citrine" categorical palette anchored on the Graphite & Citrine accent, adds colorblind-safety validation, introduces a compact axis-label formatter, consolidates theme defaults (tooltip/bar/line/pie styling), and refines LineChart rendering defaults (smooth curves, filled area, reduced line width).

Changes

Citrine Palette & Theme Defaults Refactor

Layer / File(s)	Summary
Citrine Palette & Theme Foundation `component/src/charts/theme.ts`, `component/design-tokens.css`	New `CITRINE_LIGHT` and `CITRINE_DARK` palette arrays replace Deep Ocean; `DEEP_OCEAN_*` exports are deprecated aliases. Introduces `formatAxisCompact()` formatter for K/M/B axis labels. Adds `seriesDefaults` helper centralizing bar/line/pie/tooltip styling. Updates `registerNeoboardThemes` to wire Citrine palettes and apply shared defaults to both light and dark themes. CSS `--chart-1..--chart-10` tokens updated for both `:root` and `.dark` themes.
Palette Registry & Chart Fallback `component/src/charts/palettes.ts`, `component/src/charts/base-chart.tsx`, `component/src/charts/index.ts`	New `citrine` palette entry registered as default. Legacy `deep-ocean` palette aliased to `citrine` for backward compatibility. Chart color fallback switched from `DEEP_OCEAN_LIGHT` to `CITRINE_LIGHT`. New palette and formatter constants re-exported from `index.ts`.
LineChart Defaults & Area Styling `component/src/charts/line-chart.tsx`	Smooth curves and filled area now enabled by default (`smooth: true`, `area: true`); line width reduced from 2 to 1.5. Area style now applies color-based linear gradient with opacity falloff when series color is resolved, or flat opacity when unknown.
Citrine Colorblind-Safety Validation `component/src/charts/__tests__/citrine-cvd-safety.test.ts`	New test suite validates Citrine palette meets CIE76 `deltaE` thresholds under protanopia, deuteranopia, and tritanopia vision simulations. First 5 colors must maintain `min deltaE >= 20` under each model; all 10 colors must maintain `min deltaE >= 9`. Includes HSL/RGB/Lab color transformation and LMS-based vision-simulation helpers.
Palette & Theme Test Updates `component/src/charts/__tests__/theme.test.ts`, `component/src/charts/__tests__/palettes.test.ts`, `component/src/components/composed/__tests__/chart-options-schema.test.ts`	Theme tests import and validate `CITRINE_LIGHT`/`CITRINE_DARK` instead of Deep Ocean. Palette tests assert `citrine` exists and is marked as default, while no other palette is marked default. Legacy deep-ocean tests verify color aliasing to citrine. Chart options schema test expects `"citrine"` in available palettes.
Chart Behavior & Theme Defaults Tests `component/src/charts/__tests__/base-chart.test.tsx`, `component/src/charts/__tests__/line-chart.test.tsx`, `component/src/charts/__tests__/theme-defaults.test.ts`, `app/e2e/design-system.spec.ts`	Base-chart tests expect new Citrine HSL values for defaults and fallback colors. LineChart tests validate smooth/area defaults and verify `smooth={false}` disables both; line width default changed to 1.5. New theme-defaults test validates `formatAxisCompact` formatting behavior and confirms `registerNeoboardThemes` applies correct styling to bars/lines/pies/tooltips. E2E design-system test updated to validate Citrine CSS token values and Graphite background hue.

Sequence Diagram(s)

Skipped: Changes are not primarily a new feature or multi-component flow; they are palette/defaults refactoring with straightforward wiring and validation.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related issues

#821: Directly implements acceptance criteria to replace Deep Ocean with curated Citrine palette, validate colorblind safety, and provide backward compatibility through aliasing.

Possibly related PRs

alfredo1996/neoboard#232: Modifies LineChart defaults and behavior including smooth/area/sampling in similar file paths.
alfredo1996/neoboard#97: Prior chart design-system changes that this PR builds upon and supersedes.
alfredo1996/neoboard#612: Updates chart color/palette resolution and series styling in line-chart.tsx.

Suggested labels

refactor

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch refactor/issue-821-822-citrine-charts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

sonarqubecloud · 2026-06-11T00:33:20Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

alfredo1996 added enhancement New feature or request pkg:component UI component library area:charts Chart rendering area:design Visual design, tokens, typography labels Jun 11, 2026

alfredo1996 merged commit 998644b into release/1.1 Jun 11, 2026
10 of 11 checks passed

alfredo1996 deleted the refactor/issue-821-822-citrine-charts branch June 11, 2026 00:26

alfredo1996 mentioned this pull request Jun 11, 2026

refactor(component): replace chart-1..chart-10 with curated categorical palette #821

Closed

7 tasks

alfredo1996 mentioned this pull request Jun 11, 2026

refactor(component): ship opinionated ECharts theme defaults #822

Closed

15 tasks

coderabbitai Bot mentioned this pull request Jul 23, 2026

Merge release/1.3 into dev #1233

Merged

Navigation Menu

refactor(component): Citrine chart palette + opinionated ECharts defaults - #1015

refactor(component): Citrine chart palette + opinionated ECharts defaults#1015
alfredo1996 merged 1 commit into
release/1.1from
refactor/issue-821-822-citrine-charts

alfredo1996 commented Jun 11, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 11, 2026 •

edited

Loading

Review failed

Uh oh!

Uh oh!

sonarqubecloud Bot commented Jun 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

alfredo1996 commented Jun 11, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Citrine palette (#821)

Opinionated chart defaults (#822)

Screenshots

Verification

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai Bot commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related issues

Possibly related PRs

Suggested labels

Uh oh!

Uh oh!

sonarqubecloud Bot commented Jun 11, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

alfredo1996 commented Jun 11, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 11, 2026 •

edited

Loading